<template>
  <!-- <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler"></baidu-map> -->
  <!-- <baidu-map
    class="bm-view"
    ak="UmF0u5I9CwagP68H1DZ5GdeYwYZNj9rt"
    :center="center"
    :zoom="zoom"
    :scroll-wheel-zoom="true"
    @ready="handler"
  >
  </baidu-map>-->
  <div class="baidumap" id="allmap"></div>
</template>
<script>
import { BaiduMap, BmMarker, BmPolyline } from "vue-baidu-map";
import styleJson from "@/tools/custom_map_config";
export default {
  name: "Map",
  components: {
    BaiduMap,
    BmMarker,
    BmPolyline,
  },
  props: {
    markers: {
      type: Array,
      default: () => {
        return [];
      },
    },
    polylinePath: {
      type: Array,
      default: () => {
        return [
          // { lng: 116.324356, lat: 39.980648 },
          // { lng: 118.532031, lat: 32.010158 },
          // { lng: 121.475599, lat: 31.380939 },
        ];
      },
    },
  },
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      map: null,
      mapStyle: {
        styleJson: styleJson,
      },
      BMap: null,
      Map: null,
    };
  },
  watch: {
    markers: function (val, oldVal) {
      //必须要用function  不然this指向有问题
      this.$nextTick(()=>{
        val && this.dwapMap()
      })
    },
  },
  methods: {
    handler({ BMap, map }) {
      console.log(BMap, map);
      BMap = BMap;
      this.map = map;
      this.map.clearOverlays();
      this.map.setMapStyle(this.mapStyle);
      this.$nextTick(() => {
        if (this.markers && this.markers.length > 0) {
          this.drawLine();
        } else {
          this.center.lng = 114.064;
          this.center.lat = 22.548;
          this.zoom = 13;
        }
      });
    },
    dwapMap() {
      this.map = new BMap.Map("allmap");//创建地图实例
      console.log(this.markers)
      if (this.markers.length > 0) {
        this.center.lng = this.markers[this.markers.length - 1].longitude;
        this.center.lat = this.markers[this.markers.length - 1].latitude;
      }
      let point = new BMap.Point(this.center.lng, this.center.lat); // 创建点坐标
      this.map.centerAndZoom(point, 14); // 初始化地图，设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      this.map.clearOverlays();
      this.map.setMapStyleV2(this.mapStyle);
      if (this.markers && this.markers.length > 0) {
        this.drawLine();
      } else {
        this.center.lng = 114.064;
        this.center.lat = 22.548;
        this.zoom = 13;
      }
    },
    drawLine() {
      this.zoom = 14;
      this.markers.forEach((item) => {
        let icon = null;
        if (item.onlinestatus == 0) {
          icon = new BMap.Icon(
            "http://project.tingyun.work:32784/upload/picture/bg/tb01.png",
            new BMap.Size(32, 32)
          );
        } else {
          if (item.iserror == "03") {
            icon = new BMap.Icon(
              "http://project.tingyun.work:32784/upload/picture/bg/tb03.png",
              new BMap.Size(32, 32)
            );
          } else {
            icon = new BMap.Icon(
              "http://project.tingyun.work:32784/upload/picture/bg/tb02.png",
              new BMap.Size(32, 32)
            );
          }
        }
        let pointer = new BMap.Point(item.longitude, item.latitude);
        let marker = new BMap.Marker(pointer, { icon: icon });
        marker.addEventListener("click", () => {
          this.$emit("lookDetail", item);
        });
        this.map.addOverlay(marker);
      });
      this.polylinePath.forEach((item, index) => {
        let line = [];
        item.data.forEach((child) => {
          line.push(new BMap.Point(child.longitude, child.latitude));
        });
        let colorList = [
          "#4F6FCC ",
          "#7ECF69",
          "#0080ff",
          "#eb4310",
          "#cdd541",
        ];
        let colorTemp = null;
        if (index > 4) {
          colorTemp = colorList[Math.floor(index / 4)];
        } else {
          colorTemp = colorList[index];
        }
        let polyline = new BMap.Polyline(line, {
          strokeColor: colorTemp,
          strokeWeight: 6,
          strokeOpacity: 0.9,
        });
        this.map.addOverlay(polyline);
      });
      console.log("绘制地图");
    },
  },
  mounted() {
    this.dwapMap()
  },
};
</script>
<style>
#allmap {
  width: 100%;
  height: 100vh;
}
</style>
